<!--
 * hi-button - 按钮
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="page-view">
        <!-- 基础使用 -->
        <module-demo title="基础使用" :tips="['默认高度 88rpx']">
            <view class="buttons">
                <hi-button text="基础使用"></hi-button>
            </view>
        </module-demo>

        <!-- 边框按钮 -->
        <module-demo title="边框按钮" tips="边框颜色默认为文本颜色">
            <view class="buttons">
                <hi-button text="边框按钮" border></hi-button>
                <hi-button text="自定义边框颜色" border borderColor="#ff0000"></hi-button>
            </view>
        </module-demo>

        <!-- 按钮主题 -->
        <module-demo title="按钮主题">
            <view class="buttons">
                <hi-button text="按钮主题" theme="primary"></hi-button>
                <hi-button text="按钮主题" theme="success"></hi-button>
                <hi-button text="按钮主题" theme="warning"></hi-button>
                <hi-button text="按钮主题" theme="error"></hi-button>
                <hi-button text="按钮主题" theme="info"></hi-button>
            </view>
        </module-demo>

        <!-- 镂空按钮 -->
        <module-demo title="镂空">
            <view class="buttons">
                <hi-button text="默认镂空" plain></hi-button>
                <hi-button text="主题镂空" plain theme="primary"></hi-button>
                <hi-button text="主题镂空" plain theme="success"></hi-button>
                <hi-button text="主题镂空" plain theme="warning"></hi-button>
                <hi-button text="主题镂空" plain theme="error"></hi-button>
                <hi-button text="主题镂空" plain theme="info"></hi-button>
            </view>
        </module-demo>

        <!-- 浅化背景 -->
        <module-demo title="浅化背景">
            <view class="buttons">
                <hi-button text="默认浅化" tint></hi-button>
                <hi-button text="主题浅化" tint theme="primary"></hi-button>
                <hi-button text="主题浅化" tint theme="success"></hi-button>
                <hi-button text="主题浅化" tint theme="warning"></hi-button>
                <hi-button text="主题浅化" tint theme="error"></hi-button>
                <hi-button text="主题浅化" tint theme="info"></hi-button>
            </view>
        </module-demo>

        <!-- 镂空浅化 -->
        <module-demo title="边框 + 主题 + 浅化">
            <view class="buttons">
                <hi-button text="边框主题浅化" tint border theme="primary"></hi-button>
                <hi-button text="边框主题浅化" tint border theme="success"></hi-button>
                <hi-button text="边框主题浅化" tint border theme="warning"></hi-button>
                <hi-button text="边框主题浅化" tint border theme="error"></hi-button>
                <hi-button text="边框主题浅化" tint border theme="info"></hi-button>
            </view>
        </module-demo>

        <!-- 禁用状态 -->
        <module-demo title="禁用状态">
            <hi-button text="禁用状态" disabled theme="primary"></hi-button>
        </module-demo>

        <!-- 加载状态 -->
        <module-demo title="加载状态">
            <hi-button text="加载状态" loading loadingText="正在努力加载..." theme="success"></hi-button>
        </module-demo>

        <!-- 显示图标 -->
        <module-demo title="显示图标">
            <view class="buttons">
                <hi-button text="前置图标" leftIcon="__gonggao" theme="warning"></hi-button>
                <hi-button text="后置图标" rightIcon="__fuzhi" theme="error"></hi-button>
                <hi-button text="前后图标" leftIcon="__gonggao" rightIcon="__fuzhi" theme="info"></hi-button>
            </view>
        </module-demo>

        <!-- 按钮形状 -->
        <module-demo title="按钮形状">
            <view class="buttons">
                <hi-button text="圆角按钮" round theme="primary"></hi-button>
                <hi-button text="" leftIcon="weixin" circle theme="success"></hi-button>
                <hi-button text="圆" circle theme="warning"></hi-button>
                <hi-button text="自定义圆角大小" radius="10px" theme="error"></hi-button>
            </view>
        </module-demo>

        <!-- 块状按钮 -->
        <module-demo title="块状按钮">
            <view class="buttons">
                <hi-button text="块状按钮" block theme="info"></hi-button>
            </view>
        </module-demo>

        <!-- 按钮副文本 -->
        <module-demo title="按钮副文本">
            <view class="buttons">
                <hi-button text="余额支付" subText="¥1000" theme="primary"></hi-button>
            </view>
        </module-demo>

        <!-- 链接按钮 -->
        <module-demo title="链接按钮">
            <hi-button text="链接按钮" theme="primary" link></hi-button>
            <hi-button text="显示下划线的链接按钮" theme="success" link underline></hi-button>
        </module-demo>

        <!-- 防抖 -->
        <module-demo title="防抖按钮">
            <hi-button text="防抖按钮 - 2.5s" theme="warning" time="2500" @click="handleDebounceClick"></hi-button>
            <hi-button text="设置防抖提示" theme="error" time="5000" tips="点击太快啦"></hi-button>
        </module-demo>

        <!-- 自定义宽高 -->
        <module-demo title="自定义">
            <view class="buttons">
                <hi-button text="自定义文字颜色" color="#ff0000" theme="success"></hi-button>
                <hi-button text="自定义文字大小" fontSize="36rpx" theme="warning"></hi-button>
                <hi-button text="自定义背景" bg="linear-gradient(90deg, #ff9900, #9900ff)" color="#ffffff"></hi-button>
                <hi-button text="自定义宽高" width="200px" height="60px" theme="info"></hi-button>
            </view>
        </module-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 防抖按钮点击
    function handleDebounceClick() {
        uni.showToast({
            title: "点击了",
            icon: "none",
            mask: false
        });
    }
</script>

<style lang="scss" scoped>
    .grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
    }

    .buttons {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        gap: 10px;
    }
</style>
